<template>
    <div class="wrapper">
        <v-head></v-head>
        <v-sidebar @changeUnfold="changeUnfold" @updataHistory="updataHistory" ref="sidebar"></v-sidebar>
        <div class="main-container" :class="{'min': !unfold}" ref="container">
            <v-history :historyList="historyList" @changeHistoryList="changeHistoryList"></v-history>
            <transition name="move" mode="out-in"><router-view></router-view></transition>
        </div>
    </div>
</template>

<script>
    import vHead from './header.vue';
    import vSidebar from './sidebar.vue';
    import vHistory from './history.vue';
    export default {
        data () {
            return {
                unfold: true ,//控制容器的left值
                timer: 0,//保存定时器
                index: 0,
                historyList: [
                    {
                        subIcon: 'icon-hangdongrizhi',
                        subTitle: '业务类型设置',
                        src: '/system/business'
                    },
                    {
                        subIcon: 'icon-hangdongrizhi',
                        subTitle: '会计科目设置',
                        src: '/system/account'
                    },
                    {
                        subIcon: 'icon-hangdongrizhi',
                        subTitle: '业务类型会计科目映射设置',
                        src: '/system/business&account'
                    }
                ]
            }
        },
        mounted(){
            var that = this;
            // this.$move('1', '2', '3');
            // console.log('this', this)
            // 初始化container的宽度
            var el = document.getElementsByClassName('tab-hd-wrap')[0];
            
            this.initWidth()
            window.addEventListener('resize', that.initWidth, false)
        },
        components:{
            vHead, vSidebar,vHistory
        },
        methods: {
            changeUnfold: function (boolean) {
                // 如果布尔值，更新当前unflod的值
                typeof boolean == 'boolean' ? this.unfold = boolean : null;
                //在切换sidebar以后设置container的宽度
                this.initWidth()
            },
            initWidth: function(){//初始化和后期动态设置container的width， 后期优化
                var that = this;

                this.timer = setTimeout(()=>{
                    window.clearTimeout(that.timer);
                    var wrapW = document.querySelector('#app').clientWidth;
                    var sidebarW = that.unfold == true ? 250 : 50;
                    that.$refs.container.style.width = wrapW - sidebarW + 'px';
                }, 0)
            },
            updataHistory: function (obj) {//用户点击切换页面以后更新列表
                typeof obj == "object" ? this.historyList.push(obj) : null;
                
            },
            changeHistoryList:function (index) {
                //删除子项目
                this.historyList.splice(index, 1);
            }
        }
    }
</script>

<style lang="less" scoped>
    @import url("../../assets/css/variable.less");
    @import url("../../assets/css/public.less");
    .main-container{
        .transition(@property: left;@duration: 0.3s;);
        position: absolute;
        top: 50px;
        left: 250px;
        width: 86%;
        // padding: 0 10px;
    }
    .main-container.min{
        left: 50px;
    }
</style>